import styled from "styled-components"
import PropTypes from "prop-types"

// 返回的是一个组件，组件内部返回一个div
// const AppWrapper = styled.div``

// 1.默认使用
export const AppWrapper = styled.div`
  * {
    max-width: 100px;
  }

  .footer {
    background: #ccc;
  }
`
// 2. 嵌套使用

export const SectionWrapper = styled.div.attrs({
  tColor: (props) => props.color || "blue" // 默认值blue
})`
  border: 1px solid red;

  .title {
    color: red;
    font-size: ${(props) => props.fontSize};

    &:hover {
      // 3. 对比less,scss获取js中的变化数据，很方便
      color: ${(props) => props.tColor};
    }
  }
`
SectionWrapper.propTypes = {
  fontSize: PropTypes.string.isRequired // 只有这个必传
}

// 4. 继承使用：
export const MyButton = styled.button`
  border: 1px solid red;
  border-radius: 10px;
`

export const FootButtonWrapper = styled(MyButton)`
  //    border: 1px solid red; // 不需要写了，因为费代码，上面实现了继承
  //  border-radius: 10px;
  color: blue;
`
